<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <!-- 文本 (Text) -->
        <input v-model="message" placeholder="edit me" />
        <p>Message is: {{ message }}</p><br/>

        <!-- 多行文本 (textarea) -->
        <span>Multiline message is:</span>
        <p style="white-space: pre-line;">{{ message }}</p>
        <textarea v-model="message" placeholder="add multiple lines"></textarea>

        <!-- 复选框 (Checkbox) -->
        <br/><br/>
        <input type="checkbox" name="lzh" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label>

        <!-- 多个复选框，绑定到同一个数组： -->
        <br/><br/>
        <input type="checkbox" name="" id="jack" value="Jack" v-model="checkedNames" />
        <label for="jack">Jack</label>
        <input type="checkbox" name="" id="john" value="John" v-model="checkedNames" />
        <label for="john">John</label>
        <input type="checkbox" name="" id="mike" value="Mike" v-model="checkedNames" />
        <label for="mike">Mike</label>
        <br/><span>{{checkedNames}}</span>

        <!-- 单选框 (Radio) -->
        <br/><br/>
        <input type="radio" id="one" value="One" v-model="picked" />
        <label for="one">One</label>
        <br />
        <input type="radio" id="two" value="Two" v-model="picked" />
        <label for="two">Two</label>
        <br />
        <span>Picked: {{ picked }}</span>

        <!-- 选择框 (Select) 单选时：-->
        <br/><br/>
        <select v-model='selected'>
            <option disabled value="">Please select one</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>

        <!-- 选择框 (Select) 多选时 (绑定到一个数组)： -->
        <br/><br/>
        <select v-model="multiple_selected" multiple>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ multiple_selected }}</span>
    </div>

    <script>
        const option={
            data() {
                return {
                    message:"",
                    checked:false,
                    checkedNames:[],
                    picked :'',
                    selected:'a',
                    multiple_selected:['A','C']
                }
            },
        }

        const vm = Vue.createApp(option).mount('#app')

    </script>
</body>
</html>